<template>
    <!-- main S -->
    <view class="main">
        <!-- top S -->
        <!-- <view class="top">
            <view class="channelBox">
                <view class="channelItem" v-for="(item,index) in channel" :key="index">
                    <view class="box">
                        <image src="../../static/logo.png" mode=""></image>
                        <text>{{item.name}}</text>
                    </view>
                </view>
                <view class="clear_both"></view>
            </view>
        </view> -->
        <!-- top E -->
        <!-- center S -->
        <view class="center">
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(item,index) in bannerList" :key="index">
                    <view class="swiper-item">
                        <image src="../../static/logo.png" mode=""></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <!-- center E -->
        <!-- carTypes S -->
        <view class="carTypes">
            <scroll-view id="tab" scroll-x="true">
                <view v-for="(item,index) in barNameList" :key="item.id" class="tabName" :data-current="index"
                    @click="ontabtap">
                    <text class="tabName_text" :class="tabIndex == index?'active_text':''">{{item.name}}</text>
                </view>
            </scroll-view>
        </view>
        <!-- carTypes E -->
        <!-- orderListBox S -->
        <view class="orderListBox" v-for="(item,index) in productList" :key="item.goodsId" @tap="goProductDetail(item)">
            <!-- order S -->
            <view class="order">
                <!-- top S -->
                <view class="top">
                    <!-- topL S -->
                    <view class="topL">
                        <text>{{barNameList[tabIndex].name}}</text>
                        <text>{{item.addTime}}</text>
                    </view>
                    <!-- topL E -->
                </view>
                <!-- top E -->
                <!-- center S -->
                <view class="center">
                    <view class="logo">
                        <image :src="item.img" mode=""></image>
                    </view>
                    <view class="fonts">
                        <view class="fontTwo">
                            <text>{{item.goodsName}}</text>
                        </view>
                        <view class="fontThree">
                            <text>京东价格</text>
                            <text>￥{{item.lowestPrice}}</text>
                        </view>
                        <view class="fontFour">
                            <text>券后价格</text>
                            <text>￥{{item.lowestCouponPrice}}</text>
                        </view>
                    </view>
                </view>
                <!-- center E -->
                <!-- bottom S -->
                <view class="bottom">
                    <view class="rowOne">
                        <text class="rowOneL">获得红包</text>
                        <view class="rowOneR">
                            <text>{{item.redPackage}}</text>
                        </view>
                    </view>
                </view>
                <!-- bottom E -->
            </view>
            <!-- order E -->
        </view>
        <!-- orderListBox E -->
    </view>
    <!-- main E -->
</template>

<script>
    import {
        JdCategoryList,
        JdProductList
    } from '@/service/product.js'
    import {
        getTime,
        getStorage
    } from '@/utils/utils.js'
    export default {
        data() {
            return {
                title: 'Index',
                // 渠道列表
                channel: [],
                bannerList: [
                    "../../static/logo.png",
                    "../../static/logo.png",
                    "../../static/logo.png",
                    "../../static/logo.png",
                ],
                barNameList: [],
                tabIndex: 0,
                productList: [],
                categoryId: 1
            }
        },
        onLoad() {
            this.JdCategoryList();
            this.JdProductList();
        },
        methods: {
            // goProductList() {
            //     console.log(123);
            //     uni.navigateTo({
            //         url: `../product/product_list`
            //     })
            // },
            // scroll-view 点击 tab 时 改变下标
            ontabtap(e) {
                let index = e.target.dataset.current || e.currentTarget.dataset.current;
                this.switchTab(index);
                this.categoryId = this.barNameList[index]['id'];
                this.JdProductList();
            },
            switchTab(index) {
                if (this.tabIndex == index) {
                    return
                }
                this.tabIndex = index;
            },
            // 商品分类列表
            async JdCategoryList() {
                let {
                    data
                } = await JdCategoryList({
                    'timestamp': getTime(),
                    'openId': getStorage('openId'),
                });
                console.log('data====================>', data)
                this.barNameList = data;
            },
            // 商品列表
            async JdProductList() {
                let {
                    data
                } = await JdProductList({
                    'timestamp': getTime(),
                    'eliteId': this.categoryId,
                    'openId': getStorage('openId'),
                });
                console.log('data====================>', data)
                this.productList = data;
            },
            // 跳转到订单详情页
            goProductDetail(productDetail) {
                let productId = productDetail.goodsId;
                uni.navigateTo({
                    url: `../product/product_detail?productId=${productId}`
                })
            }
        }
    }
</script>

<style>
    .top {
        background-color: #FFFFFF;
        width: 95%;
        margin: 0 auto;
        border-radius: 25rpx;
        padding-top: 30rpx;
    }

    .top>.channelBox {
        border: 0rpx solid red;
        width: 90%;
        margin: 0 auto;
        margin-top: 30rpx;
    }

    .channelBox>.channelItem {
        float: left;
        width: 25%;
    }

    .channelItem>.box {
        float: left;
        border: 0rpx solid red;
        text-align: center;
        margin-bottom: 30rpx !important;
        margin: 0 auto;
        margin-left: 20rpx;
    }

    .box>image {
        height: 120rpx;
        width: 120rpx;
    }

    .box text {
        display: block;
        font-size: 20rpx;
        margin-top: -6rpx;
    }

    .main>.center {
        background-color: #FFFFFF;
        height: 300rpx;
        width: 95%;
        margin: 0 auto;
        margin-top: 20rpx;
        border-radius: 25rpx;
    }

    .center .swiper-item>image {
        height: 100rpx !important;
        width: 100rpx !important;
    }

    .carTypes {
        width: 96%;
        /* height: 440rpx; */
        border: 0rpx solid gray;
        margin-top: 20rpx !important;
        background-color: #fff;
        border-radius: 30rpx 30rpx 0 0;
        margin: 0 auto;
    }

    /* 车型文字 */
    #tab {
        width: 100%;
        display: flex;
        white-space: nowrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .tabName_text {
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 38rpx;
        color: #000;
    }

    /* .tabName_text::after{
		display: block;
		content: "__";
		margin-top: -60rpx;
		color: rgb(51,150,251);
		font-weight: bold;
	} */

    .tabName {
        text-align: center;
        width: 25.3%;
        display: inline-block;
        height: 80rpx;
        line-height: 80rpx;
        white-space: nowrap;
    }

    /* 车型文字选中效果 */
    .active_text {
        color: #fff;
        /* font-weight: bold; */
        color: rgb(51, 150, 251);
        /* border-bottom: 4rpx solid rgb(51,150,251); */
        border-radius: 20rpx;
    }

    .orderListBox {
        width: 100%;
        border: 0rpx solid red;
        margin: 0 auto;
    }

    .orderListBox>.order {
        /* height: 300rpx; */
        width: 95%;
        border: 0rpx solid red;
        margin: 0 auto;
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        background: #ffffff;
    }

    .order>.top {
        height: 80rpx;
        border-bottom: 1rpx solid #F1F1F1;
        width: 100%;
    }

    .order>.top>.topL {
        float: left;
    }

    .order>.top>.topL>text:first-child {
        display: inline-block;
        border: 0rpx solid red;
        height: 40rpx;
        width: 150rpx;
        margin-top: 20rpx;
        text-align: center;
        background-color: pink;
        color: #FFFFFF;
        margin-right: 10rpx;
        margin-left: 20rpx;
    }

    .order>.top>.topL>text:last-child {
        color: gray;
        font-size: 28rpx;
    }

    .order>.top>.topR {
        float: right;
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #F0AD4E;
        margin-right: 20rpx;
    }

    .order>.center {
        height: 180rpx;
        width: 95%;
        border-bottom: 1rpx solid #F1F1F1;
        margin: 0 auto;
        margin-top: 20rpx;
    }

    .order>.center>.logo {
        height: 170rpx;
        width: 170rpx;
        float: left;
        margin-right: 20rpx;
    }

    .order>.center>.logo>image {
        height: 100%;
        width: 100%;
    }

    .order>.center>.fonts>text {
        display: block;
    }

    .order>.center>.fonts>.fontOne {
        margin-bottom: 5rpx;
    }

    .order>.center>.fonts>.fontOne>text:first-child {
        display: inline-block;
        border: 1rpx solid red;
        height: 40rpx;
        width: 80rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        border-radius: 20rpx;
        color: #007AFF;
        margin-right: 10rpx;
    }

    .order>.center>.fonts>.fontOne>text:last-child {
        font-size: 28rpx;
    }

    .order>.center>.fonts>.fontTwo {
        margin-bottom: 10rpx;
    }

    .order>.center>.fonts>.fontTwo>text:last-child {
        color: gray;
        display: block;
        max-height: 80rpx;
        overflow: hidden;
    }

    .order>.center>.fonts>.fontThree>text:first-child {
        font-size: 26rpx;
        color: gray;
    }

    .order>.center>.fonts>.fontThree>text:last-child {
        font-size: 30rpx;
        font-weight: bold;
        margin-left: 20rpx;
    }

    .order>.center>.fonts>.fontFour>text:first-child {
        font-size: 26rpx;
        color: gray;
    }

    .order>.center>.fonts>.fontFour>text:last-child {
        font-size: 30rpx;
        font-weight: bold;
        margin-left: 20rpx;
        color: red;
    }

    .bottom {
        height: 90rpx;
        width: 95%;
        border: 0rpx solid red;
        margin: 0 auto;
    }

    .bottom>.rowOne {
        height: 80rpx;
        width: 100%;
        border: 0rpx solid blue;
        /* line-height: 80rpx; */
    }

    .bottom>.rowOne>.rowOneL {
        float: left;
        margin-left: 20rpx;
        color: gray;
        line-height: 80rpx;
    }

    .bottom>.rowOne>.rowOneR {
        display: block;
        float: right;
        margin-right: 20rpx;
        border: 0rpx solid red;
        padding-left: 20rpx;
        margin-top: 20rpx;
        border-radius: 20rpx;
        /* background-color: rgba(246, 203, 144, 0.3); */
    }

    .bottom>.rowOne>.rowOneR>text:first-child {
        margin-right: 20rpx;
        font-size: 24rpx;
        color: red;
        font-weight: bold;
        line-height: 40rpx;
        height: 40rpx;
    }

    .bottom>.rowOne>.rowOneR>text:last-child {
        display: inline-block;
        border: 0rpx solid red;
        width: 122rpx;
        border-radius: 20rpx;
        text-align: center;
        height: 48rpx;
        line-height: 48rpx;
        color: #FFFFFF;
        background-color: rgba(238, 153, 34, 1);
        font-size: 24rpx;
        font-weight: bold;
    }

    .bottom>.rowTwo {
        border-top: 1rpx solid #F1F1F1;
        width: 95%;
        margin: 0 auto;
        height: 50rpx;
        margin-top: 10rpx;
        padding-top: 10rpx;
    }

    .bottom>.rowTwo>text:first-child {
        font-size: 26rpx;
        color: gray;
        float: left;
        line-height: 50rpx;
    }

    .bottom>.rowTwo>text:last-child {
        font-size: 20rpx;
        color: #000000;
        float: right;
        border: 0rpx solid blue;
        width: 80rpx;
        text-align: center;
        height: 30rpx;
        margin-top: 10rpx;
        margin-right: 20rpx;
        line-height: 30rpx;
        border-radius: 20rpx;
        background-color: #F1F1F1;
    }
</style>
